<!--
 * @Descripttion: 分割线
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-09-11 08:40:23
 * @LastEditors: GW
 * @LastEditTime: 2021-09-24 13:44:22
-->
<template>
    <section class="edit-wrapper">
        <p>分割线文字</p>
        <a-textarea class="onresize" v-model="data.text" maxLength="16" cols="10" rows="5"></a-textarea>
        <p>分割线大小 {{borderWidth}}px</p>
        <a-slider v-model="borderWidth" :default-value="1" @change="onChangeFont" :min="1" :max="5" />
        <p>分割线颜色 {{borderColor}}</p>
        <a-input v-model="borderColor" type="color" @change="onChangeColor"></a-input>
        <a-divider></a-divider>
    </section>
</template>

<script>
export default {
    props: {
        data: {
            type: Object,
            default: {}
        },
    },
    data () {
        return {
            borderWidth: 1,
            borderColor: '#bbb'
        }
    },
    created(){
        this.borderWidth = this.data.borderWidth;
        this.borderColor = this.data.borderColor;
    },
    methods: {
        onChangeFont (val) {
            console.log(val)
            //分割线大小
            this.data.borderWidth = val;

        },
        onChangeColor (val) {
            console.log(val)
            //分割线颜色
            this.data.borderColor = this.borderColor;

        },
    }

}
</script>

<style lang="less" scoped>
    .edit-wrapper {
        padding: 10px 10px 28px;
        .onresize {
            resize: none;
        }
    }
</style>